<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
	    <script src="../js/flexible.js"></script>
	    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
	    <link href="../css/mui.min.css" rel="stylesheet"/>
	    <link rel="stylesheet" href="../css/index.css" />
	</head>
	<body>
		<div id="app">
			<div class="mui-content">
	            <div id="slider" class="mui-slider mui-fullscreen">
	                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
	                    <div class="mui-scroll mui-action-back">
	                    	<template v-for="(v,k,index) in seltop">
		                        <a v-bind:class="['mui-control-item',k==0? 'mui-active':' ']"  v-bind:href="'#item'+k+1+'mobile'" v-bind:data-wid="v.id">
		                           		 {{v.title}}
		                        </a>
	                        </template>
	                    </div>
	                </div>
	            </div>
       		</div>
       	</div>	
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/first.js"></script>
        <script src="../js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
        <script>
            mui.init();
            mui.plusReady(function() {
                var group = new webviewGroup(plus.webview.currentWebview().id, {
                    items: [{
                        id: "first1.html",   //这是子页1的路径
                        url: "first1.html",
                         style:{
                        	top:'0px',  
                         	bottom:'60px',
                        },
                        extras: {}
                    }, {
                        id: "first2.html",    //这是子页2的路径
                        url: "first2.html",
                         style:{
                        	top:'20px',  
                         	bottom:'60px',
                        },
                        extras: {}
                    },{
                        id: "first3.html",    //这是子页2的路径
                        url: "first3.html",
                         style:{
                        	top:'20px',  
                         	bottom:'60px',
                        },
                        extras: {}
                    }],
                    onChange: function(obj) {
                        var c = document.querySelector(".mui-control-item.mui-active");
                        if(c) {
                            c.classList.remove("mui-active");
                        }
                        document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
                    }
                });
                mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
                    var wid = this.getAttribute("data-wid");
                    group.switchTab(wid);
                });

            });
            mui.back = function() {
                var _self = plus.webview.currentWebview();
                _self.close("auto");
            }
        </script>
	</body>
</html>
